:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue900: #0948c2;
  --color-blue800: #005fed;
  --color-blue700: #0072ff;
  --color-blue600: #0085ff;
  --color-blue100: #c2e3ff;
  --color-gray900: #384047;
  --color-gray800: #606d7a;
  --color-gray700: #7d8a97;
  --color-gray600: #96a1ab;
  --color-gray400: #bdc4cb;
  --color-gray200: #dde1e4;
  --color-gray50: #f9f9f9;
  --color-error: #f84b4b;
  --color-background: #f4f6f9;
  --box-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 0px 32px rgba(0, 0, 0, 0.05);
  --box-shadow-medium: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.03);
  --box-shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 0px 12px rgba(0, 0, 0, 0.04);
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: Hiragino Sans, Segoe UI, sans-serif;
  color: var(--color-gray900);
  height: 100%;
}

#root {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.title-large {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.title-small {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.text-normal {
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%;
}

.text-bold {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.description-normal {
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%;
}

.button-primary {
  color: var(--color-white);
  background-color: var(--color-blue800);
  box-shadow: var(--box-shadow-large);
  border: none;
  border-radius: 4px;
  padding: 16px;
}

.button-primary:hover {
  background-color: var(--color-blue700);
}

.button-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.input-text {
  padding: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray200);
  border-radius: 8px;
}

.input-select {
  padding: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray200);
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><path d='M6.79289 7.79289C4.18342 7.40237 4.81658 7.40237 5.20711 7.79289L11.5 14.0858L17.7929 7.79289C18.1834 7.40237 18.8166 7.40237 19.2071 7.79289C19.5976 8.18342 19.5976 8.81658 19.2071 9.20711L12.2071 16.2071C11.8166 16.5976 11.1834 16.5976 10.7929 16.2071L3.79289 9.20711C3.40237 8.81658 3.40237 8.18342 3.79289 7.79289Z' fill='gray'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
}

.description {
  color: var(--color-gray600);
}

.error-message {
  color: var(--color-error);
}